<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor  style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="createHtmlTips" size="small">创建TIPS（html）</el-button>
          <el-button type="primary" @click="createTextTips" size="small">创建TIPS（text）</el-button>
          <el-button type="primary" @click="removePopup" size="small">删除TIPS</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import { loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import tips from "@/widgets/modelExample_cesium/common/Tips";
import {onMounted, ref} from "vue";
import AceEditor from "@/components/aceEditor.vue";

const cViewer = ref();
const htmlStr=ref(`
<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="createHtmlTips" size="small">创建TIPS（html）</el-button>
          <el-button type="primary" @click="createTextTips" size="small">创建TIPS（text）</el-button>
          <el-button type="primary" @click="removePopup" size="small">删除TIPS</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import { loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import tips from "@/widgets/modelExample_cesium/common/Tips";
import {onMounted, ref} from "vue";

const cViewer = ref();

const createHtmlTips=()=>{
  tips.createTips('tip_1',cViewer.value, '<div style="width:200px;height:200px;background:#000000;border-radius:10px;color:#ffffff;text-align:center;line-height:200px;">我的内容是html</div>', {
    type: 'html',
    width: 200,
    height: 200,
    offsetX: 1200,
    offsetY: 0,
    position: [113.3992, 36.45645],
  }, () => {

  });
}

const createTextTips=()=>{
  tips.createTips('tip_2',cViewer.value,  '就是纯文本而已，一句话', {
    type: 'text',
    width: 200,
    height: 200,
    color: '#ffffff',
    offsetX: 1200,
    offsetY: 0,
    position: [113.4992, 36.46645],
  }, () => {

  });

}

const removePopup = () => {
  tips.clearTips('tip_1')
  tips.clearTips('tip_2')
}

onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
})

<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 150px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>
`);
const tsStr=ref(`
import {Cartesian3, SceneTransforms} from 'cesium';

/**
 * 创建、更新、清除测试过
 */
class Tips {

    constructor() {}
    /**
     * 创建提示
     * @param id  element 的 id的
     * @param content  "弹框的内容"
     * @param option  {
     *   "type": "text" |  "html"
     *   "isCenter":true | false 是否居中，默认 false
     *    "background":"#ffffff"  背景颜色
     *    "backgroundImage":"url(pic.jpg)",弹框背景图片,
     *    "color":"弹窗文字颜色"
     *    "position":{x:136,y:89,z:22} 弹框的位置 笛卡尔坐标 PIE3D.Cartesian3 并不是json的x,y,z
     *    "offsetX":200,  X轴偏移
     *    "offsetY":200,  Y轴偏移
     * }
     * @param cb  关闭的触发的函数
     */
    createTips(id: any, viewer: any, content: any, option: any, callback: any) {
        let divHtml = document.createElement('div')
        document.body.appendChild(divHtml);
        divHtml.style.position = 'absolute';
        if (option["type"] && option["type"] == 'html') {
            divHtml.setAttribute("id", id)
            divHtml.setAttribute("class", 'html-popup')
            divHtml.style.width = option["width"] + 'px' || "200px"
            divHtml.style.height = option["height"] + 'px' || "200px"
            divHtml.innerHTML = content;
        } else {
            divHtml.innerHTML = \`<div id="${/id/}" style="padding:4px 6px;color:${/option["color"]/ || "#000000"};">${/content/}</div>\`
        }
        if (option['isCenter']) {
            divHtml.style.left = '50%'
            divHtml.style.top = '50%'
            divHtml.style.marginLeft = -option["width"] / 2 + 'px' || '-100px'
            divHtml.style.marginTop = -option["height"] / 2 + 'px' || '-100px'
        } else {
            let windowPosition = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Cartesian3.fromDegrees(option["position"][0], option["position"][1]));
            divHtml.style.left = (windowPosition.x + (option["offsetX"] || 0)) + 'px'
            divHtml.style.top = (windowPosition.y + (option["offsetY"] || 0)) + 'px'
        }

        viewer.scene.postRender.addEventListener(() => {
            var windowPosition = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Cartesian3.fromDegrees(option["position"][0], option["position"][1]));
            if (!windowPosition) {
                return;
            }
            divHtml.style.left = (windowPosition.x + option["offsetX"]) + 'px';
            divHtml.style.top = (windowPosition.y + option["offsetY"]) + 'px';
            const camerPosition = viewer.camera.position;
            let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
            height += viewer.scene.globe.ellipsoid.maximumRadius;
            if ((!(Cartesian3.distance(camerPosition, Cartesian3.fromDegrees(option["position"][0], option["position"][1])) > height)) && viewer.camera.positionCartographic.height < 50000000) {
                divHtml.style.display = "block"
            } else {
                divHtml.style.display = "none"
            }
        })
    }
    //清除提示
    clearTips(id: any) {
        document.getElementById(\`${/id/}\`)?.remove()
    }
    //清除所有提示
    clearallTips() {
        let documentArray = document.getElementsByClassName('html-popup')
        if (documentArray.length > 0) {
            for (let i = 0; i < documentArray.length; i++) {
                documentArray[i].parentNode?.removeChild(documentArray[i])
            }
        }
    }
}
export default new Tips()

`);

const createHtmlTips=()=>{
  tips.createTips('tip_1',cViewer.value, '<div style="width:200px;height:200px;background:#000000;border-radius:10px;color:#ffffff;text-align:center;line-height:200px;">我的内容是html</div>', {
    type: 'html',
    width: 200,
    height: 200,
    offsetX: 1200,
    offsetY: 0,
    position: [113.3992, 36.45645],
  }, () => {

  });
}

const createTextTips=()=>{
  tips.createTips('tip_2',cViewer.value,  '就是纯文本而已，一句话', {
    type: 'text',
    width: 200,
    height: 200,
    color: '#ffffff',
    offsetX: 1200,
    offsetY: 0,
    position: [113.4992, 36.46645],
  }, () => {

  });

}

const removePopup = () => {
  tips.clearTips('tip_1')
  tips.clearTips('tip_2')
}

onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
})

</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 150px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>
